<template>
  <div class="font">
    <el-col :span="24">
      <Tabs value="name1">
        <TabPane label="基本信息" name="name1">
          <!--一行-->
          <el-row class="row">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="22">
                    <h3>基本信息</h3>
                  </el-col>
<!--                  <el-col :span="2" style="padding-left: 78px;padding-right: 10px;padding-top: 6px;">
                    <el-button>修改</el-button>
                  </el-col>-->
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" style="padding-top: 50px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>姓名</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="彭永德">
                    </el-col>
                  </el-col>
                  <el-col :span="11" :offset="2">
                    <el-col :span="6">
                      <span>性别</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="男">
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="24" style="padding-top: 20px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>所在医院</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="上海交通大学附属第一人们医院">
                    </el-col>
                  </el-col>
                  <el-col :span="11" :offset="2">
                    <el-col :span="6">
                      <span>科室</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="内分泌科">
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="24" style="padding-top: 20px;padding-bottom: 50px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>称职</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="科室主任">
                    </el-col>
                  </el-col>
                </el-col>
              </el-row>
            </div>
          </el-row>
          <!--二行-->
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>影响力得分</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <Pier></Pier>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>

            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>影响力分布</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{width: '100%', height: '100%'}">
                      <Distribute></Distribute>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>

          </el-row>
        </TabPane>
        <TabPane label="通用图谱" name="name2">
          <!--三行-->
          <el-row class="row">

            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>合作度医院</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <Hollowpier></Hollowpier>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>

            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>研究方向</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <NestedLoop></NestedLoop>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>

          </el-row>
          <!--四行-->
          <el-row class="row">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <h3>论文期刊分布</h3>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" style="padding-top: 50px">
                  <el-card shadow="hover" :body-style="{ height: '100%'}">
                    <div :style="{width: '100%', height: '400px'}">
                      <Pillar></Pillar>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-row>
        </TabPane>
        <TabPane label="疾病图谱" name="name3">
          <!--五行-->
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>论文关键词走势</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <Splashes></Splashes>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>

            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>论文发表走势</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <Area/>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>

          </el-row>
          <!--六行-->
          <el-row class="row">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="22">
                    <h3>学术成果</h3>
                  </el-col>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" style="padding: 50px 0">

                  <el-collapse accordion>
                    <el-collapse-item>
                      <template slot="title">重点中文文章</template>
                      <div>重点中文文章</div>
                    </el-collapse-item>

                    <el-collapse-item>
                      <template slot="title">重点英文文章</template>
                      <div>重点英文文章</div>
                    </el-collapse-item>

                    <el-collapse-item>
                      <template slot="title">专利成果</template>
                      <div>专利成果</div>
                    </el-collapse-item>

                    <el-collapse-item>
                      <template slot="title">科研项目</template>
                      <div>科研项目</div>
                    </el-collapse-item>

                  </el-collapse>

                </el-col>
              </el-row>
            </div>
          </el-row>
        </TabPane>
        <TabPane name="name5" label="各项得分">
          <el-row class="row">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>影响力得分</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div >
                        <p class="slider-title">影响力</p>
                        <ion-slider :grid="false" :from="75"/>
                        <p class="slider-title">学术水平</p>
                        <ion-slider from="80"/>
                        <p class="slider-title">医生潜力</p>
                        <ion-slider postfix="°" from="36"/>
                        <p class="slider-title">合作意愿</p>
                        <ion-slider from="42"/>
                        <p class="slider-title">渠道偏好</p>
                        <ion-slider from="30"/>
                        <p class="slider-title">内容偏好</p>
                        <ion-slider style="margin-bottom: 20px;" from="30"/>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
          </el-row>
        </TabPane>
        <TabPane name="name6" label="影响力">
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>影响力得分</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts15 />
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :offset="2" :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>影响力分布</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts1 />
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </TabPane>
        <TabPane name="name7" label="学术能力">
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>研究方向</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts2 />
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>期刊论文发布</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts4 />
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>论文关键词走势</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts5 />
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>论文发表走势</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts3 />
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-collapse>
                 <el-collapse-item title="重点中文文章" name="1">
                   <table cellspacing=0 class="z-table">
                     <thead>
                       <tr>
                         <th>
                           序号
                        </th>
                         <th>
                           文章名
                        </th>
                         <th>
                           年份
                        </th>
                         <th>
                           关键词
                        </th>
                         <th>
                           杂志名
                        </th>
                         <th>
                           作者
                        </th>
                       </tr>
                     </thead>
                     <tbody>
                        <tr class="z-primary">
                            <td>1</td>
                            <td>针对CD4膜蛋白的CAR-T细胞抗T细胞淋巴瘤的活性研究</td>
                            <td>2018</td>
                            <td>抗原,CD4, 淋巴瘤,T细胞, 嵌合抗原受体修饰的T细胞</td>
                            <td>中华血液学杂志</td>
                            <td>陈广华, 黄海雯,</td>
                        </tr>
                        <tr class="z-success">
                            <td>2</td>
                            <td>无关供者脐血移植治疗重型再生障碍性贫血18例疗效观察</td>
                            <td>2018</td>
                            <td>酪氨酸激酶抑制剂, 造血干细胞移植,异基因, 费城染色体, 白血病</td>
                            <td>中华血液学杂志</td>
                            <td>杨飞, 蔡文治, 杨小冬</td>
                        </tr>
                        <tr class="z-warning">
                            <td>3</td>
                            <td>诱导期初治多发性骨髓瘤患者医院感染的临床特征</td>
                            <td>2017</td>
                            <td>感染, 多发性骨髓瘤, 硼替佐米, 化学治疗, 医院感染</td>
                            <td>中国感染控制杂志
                            </td>
                            <td>颜霜, 傅琤琤, 周进</td>
                        </tr>
                        <tr class="z-danger">
                            <td>4</td>
                            <td>诱导期初治多发性骨髓瘤患者医院感染的临床特征</td>
                            <td>2017</td>
                            <td>感染, 多发性骨髓瘤, 硼替佐米,</td>
                            <td>中国感染控制杂志</td>
                            <td>颜霜, 傅琤琤, 周进, 徐云, 姚颖</td>
                        </tr>
                        <tr class="z-info">
                            <td>5</td>
                            <td>第三方脐血输注不良反应现状及其影响因素研究</td>
                            <td>2017</td>
                            <td>脐血干细胞移植, 不良反应, 影响因素分析</td>
                            <td>中华护理杂志</td>
                            <td>陆茵, 朱霞明, 李芹</td>
                        </tr>
                    </tbody>
                   </table>
                 </el-collapse-item>
                 <el-collapse-item title="重点英文文章" name="2">
                   <table cellspacing=0 class="z-table">
                        <tbody><tr>
                            <th class="col-md-1"><h4>序号</h4></th>
                            <th><h4>文章名</h4></th>
                            <th><h4>年份</h4></th>
                            <th><h4>关键词</h4></th>
                            <th><h4>杂志名</h4></th>
                            <th><h4>作者</h4></th>
                        </tr>
                        <tr class="z-primary">
                            <td>1</td>
                            <td>ZFX modulates the growth of human leukemic cells via B4GALT1.</td>
                            <td>2018</td>
                            <td>adult acute lymphoblastic leukemia</td>
                            <td>Acta biochimica et biophysica Sinica</td>
                            <td>WuJie;XiaoLun;ZhouHaixia</td>
                        </tr>
                        <tr class="z-success">
                            <td>2</td>
                            <td>Tracking hematopoietic precursor division ex vivo in real time.</td>
                            <td>2018</td>
                            <td>Hematopoietic stem cell-cell division</td>
                            <td>Stem cell research &amp; therapy</td>
                            <td>WangYuchen;TianHong;CaiWenzhi;LianZhaorui;BhavanasiDheeraj</td>
                        </tr>
                        <tr class="z-warning">
                            <td>3</td>
                            <td>Identification of novel recurrent</td>
                            <td>2017</td>
                            <td>Tim-3;acute leukemia</td>
                            <td>Blood</td>
                            <td>YaoLi;WenLijun;WangNana;LiuTianhui</td>
                        </tr>
                        <tr class="z-danger">
                            <td>4</td>
                            <td>Clinical significance of circulating microparticles in Ph</td>
                            <td>2017</td>
                            <td>JAK2V617F mutation;microparticles</td>
                            <td>Oncology letters</td>
                            <td>ZhangWenjuan;QiJiaqian</td>
                        </tr>
                        <tr class="z-info">
                            <td>5</td>
                            <td>Multiple</td>
                            <td>2017</td>
                            <td>Imatinib;MPNs;MYO18A</td>
                            <td>Molecular cytogenetics</td>
                            <td>ShengGuangying;ZengZhao;PanJinlan</td>
                        </tr>
                    </tbody></table>
                 </el-collapse-item>
                 <el-collapse-item title="专利成果" name="3">
                   <table cellspacing=0 class="z-table">
                        <tbody><tr>
                            <th class="col-md-1"><h4>序号</h4></th>
                            <th><h4>姓名</h4></th>
                            <th><h4>工作单位</h4></th>
                            <th><h4>专利名</h4></th>
                            <th><h4>专利年份</h4></th>
                            <th><h4>专利号</h4></th>
                        </tr>
                        <tr class="z-primary">
                            <td>1</td>
                            <td>彭永德</td>
                            <td>上海交通大学医学院附属瑞金医院</td>
                            <td>CCL15趋化因子在制备筛选甲状腺滤泡癌试剂中的应用</td>
                            <td>2016</td>
                            <td>ZL201410286443.1</td>
                        </tr>
                        <tr class="z-success">
                            <td>2</td>
                            <td>彭永德</td>
                            <td>上海交通大学医学院附属瑞金医院</td>
                            <td> MEN1基因及其编码蛋白的应用</td>
                            <td>2016</td>
                            <td>ZL201310024176.6</td>
                        </tr>
                    </tbody></table>
                 </el-collapse-item>
                 <el-collapse-item title="科研项目" name="4">
                   <table cellspacing=0 class="z-table">
                        <tbody><tr>
                            <th class="col-md-1"><h4>序号</h4></th>
                            <th><h4>注册题目</h4></th>
                            <th><h4>研究类型</h4></th>
                            <th><h4>研究设计</h4></th>
                            <th><h4>注册时间</h4></th>
                            <th><h4>经费来源</h4></th>
                        </tr>
                        <tr class="z-primary">
                            <td>1</td>
                            <td>注射用紫杉醇胶束联合顺铂与含聚氧乙烯蓖麻油紫杉醇注射液联合顺铂一线治疗晚期非小细胞肺癌的随机</td>
                            <td>干预性研究</td>
                            <td>随机平行对照试验</td>
                            <td>2015/4/7</td>
                            <td>自筹</td>
                        </tr>

                    </tbody></table>
                 </el-collapse-item>
              </el-collapse>
            </el-col>
          </el-row>
          <div style="height: 40px;"></div>
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>指南编著情况</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts6 />
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>共著关系网</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts7 />
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </TabPane>
        <TabPane name="name9" label="医生潜力">
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>医生潜力</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts8 />
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>学术推广潜力-参会活跃度</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">
                        <charts9 />
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </TabPane>
        <TabPane name="name10" label="合作意愿">
          合作意愿
          <el-row class="row">
            <div class="center">
              <el-row>
                <el-col :span="24" class="h">
                  <p>药企合作占比</p>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-card shadow="hover" :body-style="{ height: '100%'}">
                    <div :style="{width: '100%', height: '400px'}">
                      <charts10 />
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-row>
          <el-row>
            <el-col :span="2">
              <table class="z-table">
                    <thead>
                    <tr>
                        <th class="browser-icons"></th>

                        <th class="align-left">会议名称</th>

                        <th class="align-left">日期</th>

                        <th class="align-left">会议角色</th>

                        <th class="align-left">题目</th>

                        <th class="align-left">发言类型</th>

                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><img src="/static/img/by.jpg" width="20" height="20"></td>

                        <td class="align-left">中华医学会糖尿病学分会第二十次全国学术会议</td>

                        <td class="align-left">20161116</td>

                        <td class="align-left">发言</td>

                        <td class="align-left">自我血糖监测</td>

                        <td class="align-left">继教课程</td>

                    </tr>

                    <tr>
                        <td><img src="/static/img/ll.jpg" width="20" height="20"></td>

                        <td class="align-left">中华医学会2015年全国内分泌学术年会</td>

                        <td class="align-left">20150828</td>

                        <td class="align-left">发言</td>

                        <td class="align-left">2014-2015年度肥胖研究年度进展</td>

                        <td class="align-left">专题发言</td>

                    </tr>

                    <tr>
                        <td><img src="/static/img/hr.jpg" width="20" height="20"></td>

                        <td class="align-left">中华医学会第七届糖尿病及性腺疾病学术会议</td>

                        <td class="align-left">20170415</td>

                        <td class="align-left">发言</td>

                        <td class="align-left">糖尿病治疗新进展-从临床需求到临床证据</td>

                        <td class="align-left">专题发言</td>

                    </tr>

                    <tr>
                        <td><img src="/static/img/nh.jpg" width="20" height="20"></td>

                        <td class="align-left">中华医学会2016年全国内分泌学术大会</td>

                        <td class="align-left">20160903</td>

                        <td class="align-left">主持人</td>

                        <td class="align-left">糖尿病治疗的东西方差异</td>

                        <td class="align-left">专题发言</td>

                    </tr>

                    <tr>
                        <td><img src="/static/img/hr.jpg" width="20" height="20"></td>

                        <td class="align-left">中华医学会糖尿病学分会第十九次全国学术会议</td>

                        <td class="align-left">20151209</td>

                        <td class="align-left">参会</td>

                        <td class="align-left">讨论会</td>

                        <td class="align-left">专家答疑</td>

                    </tr>

                    <tr>
                        <td><img src="/static/img/az.jpg" width="20" height="20"></td>

                        <td class="align-left">2017协和内分泌</td>

                        <td class="align-left">20170617</td>

                        <td class="align-left">参会</td>

                        <td class="align-left">讨论会</td>

                        <td class="align-left">专家答疑</td>

                    </tr>


                    </tbody>
                </table>
            </el-col>
          </el-row>
        </TabPane>
        <TabPane name="name11" label="渠道偏好">
          <el-row class="row">
            <div class="center">
              <el-row>
                <el-col :span="24" class="h">
                  <p>研究方向</p>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-card shadow="hover" :body-style="{ height: '100%'}">
                    <div :style="{width: '100%', height: '400px'}">
                      <charts11 />
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-row>
          <el-row class="row">
            <div class="center">
              <el-row>
                <el-col :span="24" class="h">
                  <p>HUI平台活跃度</p>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-card shadow="hover" :body-style="{ height: '100%'}">
                    <div :style="{width: '100%', height: '400px'}">
                      <charts12 />
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-row>
        </TabPane>
        <TabPane name="name12" label="内容偏好">
          内容偏好
          <el-row class="row">
            <div class="center">
              <el-row>
                <el-col :span="24" class="h">
                  <p>关注内容</p>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-card shadow="hover" :body-style="{ height: '100%'}">
                    <div :style="{width: '100%', height: '400px'}">
                      <charts13 />
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-row>
        </TabPane>
        <TabPane label="历史记录" name="name4">
          <!--七行-->
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>指南编著情况</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">

                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>

            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>共著关系网</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{width: '100%', height: '100%'}">
                      <Relation></Relation>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>

          </el-row>

          <!--八行-->
          <el-row class="row">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <h3>线上问诊</h3>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" style="padding-top: 50px">
                  <el-card shadow="hover" :body-style="{ height: '100%'}">
                    <div :style="{width: '100%', height: '400px'}">
                      <LineColumn></LineColumn>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-row>

          <!--九 行-->
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>HUI平台活跃度</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <Linear></Linear>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>

            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>关注内容</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{width: '100%', height: '100%'}">
                      <Sanchi></Sanchi>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>

          </el-row>

          <!--十行-->
          <el-row class="row">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>医生潜力</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <Circless></Circless>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>

            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>学术推广潜力-参会活跃度</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{width: '100%', height: '100%'}">
                      <Splashes2></Splashes2>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>

          </el-row>

        </TabPane>
      </Tabs>

    </el-col>
  </div>
</template>

<script>
  import chartwrap from '@/comcom/chartwrap'
  import charts1 from './charts/charts1'
  import charts2 from './charts/charts2'
  import charts3 from './charts/charts3'
  import charts4 from './charts/charts4'
  import charts5 from './charts/charts5'
  import charts6 from './charts/charts6'
  import charts7 from './charts/charts7'
  import charts8 from './charts/charts8'
  import charts9 from './charts/charts9'
  import charts10 from './charts/charts10'
  import charts11 from './charts/charts11'
  import charts12 from './charts/charts12'
  import charts13 from './charts/charts13'
  // import charts14 from './charts/charts14'
  import charts15 from './charts/charts15'
  import Pier from './pier';
  import Distribute from './distribute';
  import Hollowpier from './hollowpier';
  import NestedLoop from './NestedLoop';
  import Pillar from './pillar';
  import Splashes from './splashes';
  import Area from './area';
  import Relation from './relation';
  import LineColumn from './LineColumn';
  import Linear from './linear';
  import Sanchi from './sanchi';
  import Splashes2 from './splashes2';
  import Circless from './circless';
  import ionSlider from '@/comcom/ionSlider'
  require('ion-rangeslider')

  export default {
    components: {
      chartwrap,
      charts1,
      charts2,
      charts3,
      charts4,
      charts5,
      charts6,
      charts7,
      charts8,
      charts9,
      charts10,
      charts11,
      charts12,
      charts13,
      // charts14,
      charts15,
      ionSlider,
      Pier, Distribute,Hollowpier,NestedLoop,Pillar,Splashes,Area,Relation,LineColumn,Linear,Sanchi,Splashes2,Circless
    },
    methods: {
    }
  }
</script>

<style scoped>
  .basic {
    background-color: rgba(245, 245, 248, 0.1);
    margin-top: 50px;
  }
  .basic > div {
    color: #fff;
    padding: 15px 20px;
  }
  .row {
    padding-bottom: 30px;
  }
  .center {
    padding: 10px 40px;
    color: #fff;
    border-radius: 10px;
    background-image: url("../../../assets/blur-bg-blurred.jpg");
  }
  .h {
    border-bottom: 2px solid #fff;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
  }
  span{
    display: inline-block;
    height: 25px;
    font-size: 16px;
  }
  .el-button {
    background: #1f9f91;
    border: none;
    color: #fff;
    font-size: 14px;
    padding: 9px 14px;
  }
  .search-input {
    margin-left: -8px;
    padding-left: 8px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .15);
    height: 30px;
    width: 100%;
  }
  .el-card {
    background-color: rgba(245, 245, 248, 0);
    border: none;
  }

</style>
<style>
  .ivu-tabs-nav{
  width: 100%;
  }
  .ivu-tabs-nav>div{
  width: 7.87%;
  text-align: center;
box-sizing: border-box;
padding-right: 8px;
  }
  .ivu-tabs-nav .ivu-tabs-tab{
  }
  .ivu-tabs-tab{
  color: #fff;
  font-size: 20px;
  }
  .ivu-tabs-ink-bar{
    background-color: #e85656!important;
    height: 5px!important;
    position: absolute!important;
    left: 0!important;
    bottom: -5px!important;
  }
  .ivu-tabs-nav .ivu-tabs-tab-active{
    color: #fff!important;
    font-weight: bold!important;
  }
  .ivu-tabs-nav {
    border-bottom: 5px solid #fff!important;
  }
  .el-collapse-item__header{
    background-color: rgba(245, 245, 248, 0) !important;
    color: #fff!important;
  }
  .el-collapse-item__wrap{
    background-color: rgba(245, 245, 248, 0)!important;
    color: #fff!important;
  }
  .el-collapse-item__content{
    color: #fff!important;
  }
  .slider-title{
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
  }
  .ivu-tabs-nav .ivu-tabs-tab{padding: 8px 0;}
  /*.ivu-tabs-nav .ivu-tabs-tab{margin-right: 8px;}*/
</style>

